<template>
  <div class="setting mt-2">
    <uni-list class="uni-list-plus">
      <uni-list-item
        :title="$t('setting.t_language')"
        :rightText="data.locale"
        link
        @click="checkedSelect('language')"
      ></uni-list-item>
      <uni-list-item :title="$t('setting.t_currency')" :rightText="data.currency" link @click="checkedSelect('currency')"></uni-list-item>
      <!-- <uni-list-item :title="t('account_security')" link @click="goToPwd()" ></uni-list-item> -->
      <uni-list-item :title="$t('setting.t_about')" link @click="proxy.$util.navigateTo('/pages/setting/about/index')"></uni-list-item>
      <uni-list-item :title="$t('setting.delete_account')" v-if="proxy.$util.isLogin()" link @click="deleteAccount"></uni-list-item>
    </uni-list>

    <uni-list class="uni-list-plus mt-2" v-if="proxy.$util.isLogin()">
      <uni-list-item :title="$t('setting.t_login')" clickable class="login" @click="checkedSelect('logout')"></uni-list-item>
    </uni-list>
  </div>

  <uv-action-sheet
    ref="actionSheet"
    :safeAreaInsetBottom="true"
    :actions="data.selects"
    :cancelText="$t('common.cancel')"
    :title="data.title"
    @select="actionsSelect"
  ></uv-action-sheet>
</template>

<script setup>
import { i18n, t } from '@/locale/index'
const { proxy } = getCurrentInstance()
const actionSheet = ref(null)
const settings = uni.getStorageSync('settings');

const data = reactive({
  selects: [],
  type: 'language',
  title: '',
  locale: proxy.$util.languages().find(item => item.code == (uni.getStorageSync('user_language') || 'zh_cn'))?.name,
  currency: uni.getStorageSync('user_currency') || settings.system.currency,
})

const checkedSelect = type => {
  data.title = ''
  data.type = type

  if (type == 'language') {
    data.selects = proxy.$util.languages()
  }

  if (type == 'currency') {
    data.selects = settings.currencies
  }

  if (type == 'logout') {
    data.title = t('setting.t_login_hint')
    data.selects = [{ name: t('common.confirm') }]
  }

  proxy.$refs.actionSheet.open()
}

const actionsSelect = e => {
  if (data.type == 'logout') {
    uni.removeStorageSync('account')
    uni.setStorageSync('access-token', proxy.$util.randomString(64))
    uni.switchTab({
      url: '/pages/account/home/home',
    })
    return
  }

  if (data.type == 'language') {
    // 这里设置 uniapp 内置组件的语言
    if (e.code == 'zh_cn') {
      uni.setLocale('zh-Hans')
    } else if (e.code == 'zh_hk') {
      uni.setLocale('zh-Hant')
    } else {
      uni.setLocale('en')
    }

    // 这里设置 vue-i18n 的语言
    uni.setStorageSync('user_language', e.code)
    i18n.global.locale = e.code
    data.locale = proxy.$util.languages().find(item => item.code == e.code).name
  }

  if (data.type == 'currency') {
    uni.setStorageSync('user_currency', e.code)
    data.currency = e.code
  }

  // #ifdef H5
  location.reload()
  // #endif

  // #ifdef APP-PLUS
  plus.runtime.restart()
  // #endif

  // #ifdef MP
  uni.reLaunch({ url: '/pages/index/index' })
  // #endif
}

const deleteAccount = () => {
  uni.showModal({
    title: t('setting.delete_account'),
    content: t('setting.delete_account_hint'),
    success: res => {
      if (res.confirm) {
        proxy.$http.del('me').then(res => {
          uni.removeStorageSync('account')
          uni.setStorageSync('access-token', proxy.$util.randomString(64))
          uni.switchTab({
            url: '/pages/account/home/home',
          })
        })
      }
    },
  })
}
</script>

<style scoped lang="scss">
.setting-wrap {
  margin-top: 20rpx;
}

.login {
  text-align: center;
  font-weight: bold;

  ::v-deep .uni-list-item__content-title {
    color: #ce0000;
  }
}
</style>
